<template>
  <div class="block">
    <el-timeline :reverse="true">
      <el-timeline-item v-for="(item,index) of devErrorList" :key="index" :timestamp="item.occurTime" placement="top">
        <el-badge class="item" is-dot :hidden="item.isRead === 1">
          <el-card
            class="message-card"
          >
            <el-tag
              v-if="item.isProcessed === 1"
              type="info"
              style="margin-right: 20px"
            >
              已处理
            </el-tag>
            <el-tag
              v-if="item.isRead === 1"
              type="info"
            >
              已读
            </el-tag>
            <h4>{{ item.errorType }}</h4>
            <p>地点：{{ item.unit+item.lab }}</p>
            <p>设备名称：{{ item.deviceName }}</p>
            <p>设备编号：{{ item.deviceId }}</p>
            <p>异常情况：{{ item.errorMsg }}</p>
            <div class="message-card-footer">
              <div v-if="item.isRead === 0 && item.isProcessed === 1">
                <el-button

                  size="small"
                  @click="handleReadAndProcessed(item.isRead,item.isProcessed,item.id)"
                >
                  已读
                </el-button>
              </div>

              <div v-if="item.isProcessed === 0">
                <el-button
                  :disabled="item.isProcessed === 1"
                  size="small"
                  @click="handleCancelError(item)"
                >
                  取消
                </el-button>
                <el-button
                  :disabled="item.isProcessed === 1"
                  size="small"
                  type="primary"
                  @click="handleConfirmError(item)"
                >
                  确认
                </el-button>
              </div>

            </div>
          </el-card>
        </el-badge>

      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { getDevErrorList, haveProcessed, haveRead } from '@/api/error'
import { updateDevice } from '@/api/device'

export default {

  data() {
    return {
      queryVo: {
        query: {
          unitId: null
        }
      },
      devErrorList: []
    }
  },
  mounted() {
    getDevErrorList(this.queryVo).then(response => {
      this.devErrorList = response.data.list
    })
  },
  methods: {
    handleReadAndProcessed(isRead, isProcessed, devErrorId) {
      console.log(isRead, isProcessed, devErrorId)
      if (isRead === 0) {
        haveRead(devErrorId).then(() => {
          if (isProcessed === 0) {
            console.log(111)
            haveProcessed(devErrorId).then(() => {
              getDevErrorList(this.queryVo).then(response => {
                this.devErrorList = response.data.list
                this.$store.dispatch('common/setUnreadCount', this.queryVo)
              })
            })
          } else {
            getDevErrorList(this.queryVo).then(response => {
              this.devErrorList = response.data.list
              this.$store.dispatch('common/setUnreadCount', this.queryVo)
            })
          }
        })
      }
    },
    handleConfirmError(item) {
      this.$confirm('是否确认该设备异常?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((action) => {
        if (action === 'confirm') {
          const device = {
            id: item.deviceId,
            status: 2
          }
          updateDevice(device).then(() => {
            this.handleReadAndProcessed(item.isRead, item.isProcessed, item.id)

            this.$notify({
              title: 'Success',
              message: '确认异常成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认'
        })
      })
    },

    handleCancelError(item) {
      this.$confirm('是否确认该设备无异常?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((action) => {
        if (action === 'confirm') {
          this.handleReadAndProcessed(item.isRead, item.isProcessed, item.id)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认'
        })
      })
    }
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.message-card {
  width: 600px;

}
.message-card:hover {
  /*background-color: #F9F9F9;
  cursor:pointer*/
}
.message-card-footer {
  position: relative;
  left: 400px;

}
</style>
